<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :latitude="latitude" :longitude="longitude" scale="12" :show-location="true" :markers="marks"
					@markertap="mktap" >
					<cover-image v-if="titles" @click="into" src="../../static/icon/toWhere.png" class="toWhere"></cover-image>
					<cover-view v-if="titles" class="btmns"></cover-view>
					<cover-view v-if="titles" class="btmhrs"></cover-view>
					<cover-view v-if="titles" class="btm btomTitles" style="font-size: 18px;font-weight: bold;">{{titles}}</cover-view>
					<cover-view v-if="titles" class="btoAdress">地址：{{address}}</cover-view>
					<cover-view v-if="titles" class="btm">总投资：{{allMoney}}亿元</cover-view>
					<cover-view v-if="titles" class="btm">年度计划投资：{{yearMoney}}亿元</cover-view>
					<cover-view v-if="titles" class="btmCon">建设规模和内容：{{yearConten}}</cover-view>
					<cover-view v-if="titles" class="btmhr"></cover-view>
					<cover-view v-if="titles" class="btm">当前已完成投资：{{finishMoney}}亿元</cover-view>
					<cover-view v-if="titles" class="btmn">完成率：{{achieving}}%</cover-view>
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	import AMap from "../../libs/amap-wx.js";
	export default {
		//var amapFile = require('../../libs/amap-wx.js');
		data() {
			return {
				//id:0, // 使用 marker点击事件 需要填写id
				//title: 'map',
				mapKey: "c17650efeb8ffe4b0004946fc74f00d1",
				latitude: 27.908508,
				longitude: 112.959268,
				marks: [
					// {latitude:28.2567,longitude:112.8765,iconPath:'../../static/icon/location.png'},
					// {latitude:27.2567,longitude:111.8765,iconPath:'../../static/icon/location.png'},
					// {latitude:28.1567,longitude:111.7765,iconPath:'../../static/icon/location.png'}
				],
				newsData: [],
				ids: 0,
				titles:'',
				address:'',
				allMoney:'',
				yearMoney:'',
				yearConten:'',
				finishMoney:'',
				achieving:'',
				jingdu:'',
				weidu:''
			}
		},
		onLoad(options) {
			console.log(options);
			let bw = options.bw;
			let dj = options.dj;
			let id = options.id;
			
			this.amapPlugin = new AMap.AMapWX({
				key: this.mapKey, //该key 是在高德中申请的微信小程序key
			});
			this.doGetLocation();
			var arr = {
				latitude: bw,
				longitude: dj,
				id: id,
				iconPath: '../../static/icon/to.png'
			}
			this.marks.push(arr)
			this.marks.push(this.newsData[0])
			console.log(this.marks)
			this.latitude = bw;
			this.longitude = dj
		},

		methods: {
			doGetLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.newsData = [{
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '../../static/icon/form.png',
							id: this.ids
						}]
					},
					fail: (err) => {
						uni.showToast({
							title: "获取失败"
						})
					}
				})
			},
			mktap(e) {
				let id = e.detail.markerId
				// console.log(id)
				this.$http.get("/project/v1/info.do?projectId="+id)
				.then((res) => {
					console.log(res);
					console.log(res.data.result)
					let datas = res.data
					this.titles = datas.projectName
					this.address = datas.buildLocation
					this.allMoney = datas.totalInvestment
					this.yearMoney = datas.planInvestment
					this.yearConten = datas.buildScale
					this.finishMoney = datas.monthCumulativeInvestment
					this.achieving = datas.rate
					this.weidu = datas.bw
					this.jingdu = datas.dj
				})
			},
			into(){
				//打开第三方地图
				let latitude = this.weidu
				let longitude = this.jingdu
				let name = this.titles
				console.log(latitude,longitude)
			    let url = "";
			    if (plus.os.name == "Android") {//判断是安卓端
					plus.nativeUI.actionSheet({//选择菜单
					    title: "选择地图应用",
					    cancel: "取消",
					    buttons: [{title: "腾讯地图"},{title: "百度地图"}, {title: "高德地图"}]
					}, function(e) {
					    switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
					        case 1:
							    //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
					            url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=724BZ-LXILX-3544S-TCZ23-KUYZ2-TABXD`;
					            break;
					        case 2:
					            url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
					            break;
							case 3:
							    url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
					        default:
					            break;
					    }
					    if (url != "") {
					        url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
					        plus.runtime.openURL(url, function(e) {
					            plus.nativeUI.alert("本机未安装指定的地图应用");
					        });
					    }
					})
			    } else {
			        // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
			        plus.nativeUI.actionSheet({
			            title: "选择地图应用",
			            cancel: "取消",
			            buttons: [{title: "腾讯地图"},{title: "百度地图"}, {title: "高德地图"}]
			        }, function(e) {
			            switch (e.index) {
			                case 1:
			                    url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=724BZ-LXILX-3544S-TCZ23-KUYZ2-TABXD`;
			                    break;
			                case 2:
			                    url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
			                    break;
							case 3:
							    url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
			                default:
			                    break;
			            }
			            if (url != "") {
			                url = encodeURI(url);
			                plus.runtime.openURL(url, function(e) {
			                    plus.nativeUI.alert("本机未安装指定的地图应用");
			                });
			            }
			        })
			    }
			}
		}
	}
</script>

<style>
	map {
		width: 100%;
		height: 100vh;
	}
	.btms {
		/* font-size: 18px; */
		background: #FFF;
	}
	.btmhrs {
		margin-top: 53vh;
		background: #FFF;
		height: 10px;
	}
	uni-cover-view {
		/* overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis; */
		white-space: normal;
		line-height: normal;
		/* font-size: 18px;
		font-family:"Microsoft YaHei","华文楷体" */
	}
	.btmCon {
		background: #FFF;
	}
	/* .titles span{
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	} */
	.btm {
		background: #FFF;
		height: 25px;
	}
	.btoAdress {
		background: #FFF;
		height: 22px;
	}
	.btmhr {
		background: #FFF;
		height: 5px;
	}
	.btmn {
		background: #FFF;
		height: 300px;
	}
	.btmns {
		float: left;
		margin-top: 53vh;
		background: #FFF;
		height: 500px;
		width: 15px;
	}
	.toWhere {
		position: fixed;
		bottom: 47vh;
		right: 1vh;
		width: 50px;
		height: 50px;
	}
</style>
